<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll</title>
    <style>
        .container{
            width: 300px;
            height: 400px;
            margin: 0 auto;
            border: 3px solid black;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道历史地理发生了两岸三地方腊时尽量内力反噬联发科流空手道
    </div>
    <button onclick="show()">show</button>
    <button onclick="scrollOne()">滚上去</button>
    <button onclick="scrollDown()">滚下去</button>
    <script>
        function scrollOne(){
            const container = document.getElementById("container")
            container.scrollTop = 0
        }
        function scrollDown(){
            const container = document.getElementById("container")
            container.scrollTop += 10
        }
        function show(){
            const container = document.getElementById("container")
            console.log("offsetHeight",container.offsetHeight)
            console.log("clientHeight",container.clientHeight)
            console.log("scrollHeight",container.scrollHeight)
            console.log("scrollTop",container.scrollTop)
        }

    </script>
</body>
</html>